<!--<template>-->
<!--  <div>-->
<!--    &lt;!&ndash; banner &ndash;&gt;-->
<!--    <div class="banner" :style="cover">-->
<!--      <h1 class="banner-title">{{ album.name }}</h1>-->
<!--    </div>-->
<!--    &lt;!&ndash; 相册列表 &ndash;&gt;-->
<!--    <v-card class="blog-container">-->
<!--      <div class="photo-wrap">-->
<!--        <img-->
<!--          v-for="(item, index) of photoList"-->
<!--          :key="index"-->
<!--          :src="item.url" width="900px;" height="500px;"-->
<!--        />-->
<!--      </div>-->
<!--      &lt;!&ndash; 分页按钮 &ndash;&gt;-->
<!--      <v-pagination-->
<!--        color="#00C4B6"-->
<!--        v-model="current"-->
<!--        :length="Math.ceil(count / size)"-->
<!--        total-visible="size"-->
<!--      />-->
<!--    </v-card>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import albumApi from '../../api/album';-->
<!--export default {-->
<!--  metaInfo:{-->
<!--    meta: [{-->
<!--      name: 'keyWords',-->
<!--      content: "西瓜博客,开源博客,www.r2blog.cn"  //变量或字符串-->
<!--    }, {-->
<!--      name: 'description',-->
<!--      content: "一个专注于技术分享的博客平台,大家以共同学习,乐于分享,拥抱开源的价值观进行学习交流"-->
<!--    }]-->
<!--  },-->
<!--  data: function() {-->
<!--    return {-->
<!--      albumId: this.$route.params.albumId,-->
<!--      photoAlbumName: "",-->
<!--      photoAlbumCover: "",-->
<!--      photoList: [],-->
<!--      current: 1,-->
<!--      size: 10,-->
<!--      current: 1,-->
<!--      count: 0,-->
<!--      album: {}-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    fetchData() {-->
<!--      const param = {-->
<!--        current: this.current, size: this.size, albumId: this.albumId-->
<!--      }-->
<!--      albumApi.pictureList(param).then(res => {-->
<!--        if (res.code === 200) {-->
<!--          this.photoList = res.data.pictureList;-->
<!--          this.count = res.data.total;-->
<!--        }-->
<!--      })-->
<!--    },-->

<!--    albumInfo() {-->
<!--      albumApi.albumInfo(this.albumId).then(res => {-->
<!--        if (res.code === 200) {-->
<!--          this.album = res.data;-->
<!--        }-->
<!--      })-->
<!--    },-->

<!--    preview(index) {-->
<!--      this.$imagePreview({-->
<!--        images: this.photoList,-->
<!--        index: index-->
<!--      });-->
<!--    },-->
<!--    -->
<!--  },-->

<!--  watch: {-->
<!--    current(value) {-->
<!--      this.current = value;-->
<!--      this.fetchData();-->
<!--    }-->
<!--  },-->

<!--  created() {-->
<!--    this.albumInfo();-->
<!--    this.fetchData();-->
<!--  },-->

<!--  computed: {-->
<!--    cover() {-->
<!--      const cover = this.album.cover;-->
<!--      return "background: url(" + cover + ") center center / cover no-repeat";-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.photo-wrap {-->
<!--  display: flex;-->
<!--  flex-wrap: wrap;-->
<!--}-->

<!--.photo {-->
<!--  margin: 3px;-->
<!--  cursor: pointer;-->
<!--  flex-grow: 1;-->
<!--  object-fit: cover;-->
<!--  height: 200px;-->
<!--}-->

<!--.photo-wrap::after {-->
<!--  content: "";-->
<!--  display: block;-->
<!--  flex-grow: 9999;-->
<!--}-->

<!--@media (max-width: 759px) {-->
<!--  .photo {-->
<!--    width: 100%;-->
<!--  }-->
<!--}-->
<!--</style>-->
